.<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
	</head>
	<style>
		table{
			width: 500px;
            text-align: center;
            margin: 100px auto;
		}
		th{
            color: white;
            padding: 10px;
            font-size: 20px; 
		}
		tr{
            color: black;
            padding: 10px;
            font-size: 15px; 
            border-color: #DCDCDC;
		}
		.change{
			background-color:white;
			}
		.tr1{
			background-color:#C7C7C7;
		}
		.tr2{
			background-color:#707070;
		}
	</style>
	<body>
		<table border="1" cellspacing="0" cellpadding="5" align="center" bordercolor="#DCDCDC">
				<thead>
					<tr bgcolor="cornflowerblue">
						<th>序号</th>
						<th>姓名</th>
						<th>成绩</th>
						<th>成绩</th>
					</tr>
				</thead>
		          <tr class="tr1" bgcolor="#C7C7C7">
                    <td>1</td>
                    <td>吕布</td>
                    <td>大戟</td>
                    <td>100</td>
                  </tr>
		          <tr class="tr2" bgcolor="#707070">
                    <td>2</td>
                    <td>赵云</td>
                    <td>枪法</td>
                    <td>100</td>
                 </tr>
				 <tr class="tr1" bgcolor="#C7C7C7">
                    <td>3</td>
                    <td>典韦</td>
                    <td>双戟</td>
                    <td>100</td>
                  </tr>
		          <tr class="tr2" bgcolor="#707070">
                    <td>4</td>
                    <td>张飞</td>
                    <td>长矛</td>
                    <td>100</td>
                   </tr>
		          <tr class="tr1" bgcolor="#C7C7C7">
                    <td>5</td>
                    <td>关羽</td>
                    <td>刀法</td>
                    <td>100</td>
                  </tr>
		          <tr class="tr2" bgcolor="#707070">
                    <td>6</td>
                    <td>黄忠</td>
                    <td>弓法</td>
                    <td>100</td>
                  </tr>
		</table>
		<script>
			var trs=document.getElementsByTagName("tr");
			for(var i=1;i<trs.length;i++)
			{
				trs[i].s=i;
				trs[i].onmouseover=function(){
						this.className="change";
				}
				trs[i].onmouseout=function(){
					if(this.s%2==0)
					{
						this.className="tr2";
					}
					else
					{
						this.className="tr1";
					}
				}
			}
		</script>
	</body>
</html>
